<template>
  <div class="M1">


    <div class="content">





        <div class="banner">
          <video  muted  controls   autoplay loop="loop" :width="750" src="https://wap.wkxz.net/video/banner.mp4"/>

        </div>
        <div class="main">
          <a-typography-title :heading="3" class="title">用户登录</a-typography-title>
          <a-typography-title :heading="4" class="sub-title">{{ SysConfig.siteName }}</a-typography-title>


          <a-form ref="formRef" :model="formState.data" :rules="LOGIN_RULE" layout="vertical" @keypress.enter="onSubmit()">
            <a-form-item name="account">
              <a-input v-model="formState.data.account" size="large" placeholder="登录账号" allow-clear>
                <template #prefix>
                  <icon-user/>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="password">

              <a-input-password v-model="formState.data.password" autocomplete="off" placeholder="登录密码" allow-clear>
                <template #prefix>
                  <icon-lock/>
                </template>
              </a-input-password>


            </a-form-item>


            <a-form-item v-if="formState.showCaptcha" name="captcha">
              <a-input v-model="formState.data.captcha" size="large" placeholder="验证码">

                <template #append>
               <span style="width: 100%;height: 40px; " @click.stop="loadCaptcha">
						<img v-if="formState.captchaBase64" :src="formState.captchaBase64" alt=""/>
					</span>
                </template>


              </a-input>
            </a-form-item>

            <a-form-item>
              <a-button size="large" type="primary" long :loading="formState.btnLoading" @click="onSubmit"> 登 录
              </a-button>
            </a-form-item>

            <a-form-item>
              <a-space size="large" align="center">
                <a-checkbox v-model="remember">记住我账号</a-checkbox>

              </a-space>
            </a-form-item>

          </a-form>


        </div>


    </div>

            <div class="footer"> {{ info() }}</div>

  </div>
</template>

<script lang="ts" setup name="LOGIN_PAGE">

import {reactive, ref, onMounted} from 'vue'
import {useRouter} from "vue-router";
import {LOGIN_DTO, LOGIN_RULE} from "../resource/form";
import {AccountApi} from "@/libs/api/AccountApi";
import {StrUtil, MsgUtil} from '@/utils'
import {useOperatorStore} from '@/libs/store'
import {SysConfig} from "@/libs/config";


const {setToken} = useOperatorStore()
const router = useRouter()
const formRef = ref(null)
const formState = reactive({
  data: {...LOGIN_DTO},
  showCaptcha: false,
  btnLoading: false,
  captchaBase64: null
});

const remember = ref(false)
// 加载验证码
const loadCaptcha = async () => {
  const uuid = StrUtil.uuid(16);
  formState.data.uuid = uuid;
  const {data} = await AccountApi.getCaptcha(uuid)
  formState.captchaBase64 = data
}


// 登录提交处理程序
const onSubmit = () => {
  formState.btnLoading = true
  formRef.value.validate().then(
      async () => {
        const {data} = await AccountApi.login(formState.data);
        MsgUtil.message("登录成功!", 'success');
        await setToken(data)
        if (remember.value) {
          window.localStorage.setItem("ACCOUNT", formState.data.account)
        }


        await router.push({path: SysConfig.homeUrl})
        formState.btnLoading = false
      }).catch((err) => {
        if (formState.data.uuid == null) loadCaptcha();
        if (err?.code > 0) formState.showCaptcha = true;
        formState.btnLoading = false
      }
  )

}




const info = () => {
  const {companyName, beginYear} = SysConfig
  const nowYear = new Date().getFullYear()
  if (nowYear > beginYear) {
    return `Copyright @ ${beginYear}-${nowYear} ${companyName}. All Rights Reserved`
  }
  return `Copyright @ ${beginYear} ${companyName}. All Rights Reserved`
}

onMounted(() => {
  const account = window.localStorage.getItem("ACCOUNT");
  if (account) {
    formState.data.account = account
    remember.value = true
  }
})


</script>
<style lang="less" scoped>
@import url('@/assets/style/login.less');

</style>


